import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart';
import 'package:flutter/material.dart';
import 'package:flutter_changdian_football/pages/mine/my_purse/expenses_record/expenses_record_widget.dart';
import 'package:flutter_changdian_football/pages/mine/my_purse/my_purse_controller.dart';
import 'package:flutter_changdian_football/pages/mine/my_purse/recharge_record/recharge_record_widget.dart';
import 'package:flutter_changdian_football/routers/app_routes.dart';
import 'package:flutter_changdian_football/widget/gradient_tab_indicator.dart';
import 'package:flutter_changdian_football/widget/screenutil/custom_screenutil.dart';
import 'package:get/get.dart';

class MyPursePage extends StatelessWidget {
  const MyPursePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF8FAF9),
      body: GetBuilder<MyPurseController>(
        init: MyPurseController(),
        builder: (myPurseController) {
          return _buildScaffoldBody(myPurseController, context);
        }
      ),
    );
  }

  
  Widget _buildScaffoldBody(MyPurseController myPurseController, context) {
    final double statusBarHeight = MediaQuery.of(context).padding.top;
    final double pinnedHeaderHeight = statusBarHeight + kToolbarHeight;
    return ExtendedNestedScrollView(
      controller: myPurseController.scrollController,
      headerSliverBuilder: (BuildContext c, bool f) {
        return <Widget>[
          SliverAppBar(
            pinned: true,
            expandedHeight: 260.w,
            title: Text('我的钱包', style: TextStyle(fontSize: 16.sp, color: myPurseController.titleAlpha <= 180 ? Colors.white : const Color(0xff333333)),),
            iconTheme: IconThemeData(
              color: myPurseController.titleAlpha <= 180 ? Colors.white : const Color(0xff333333)
            ),
            centerTitle: true,
            backgroundColor: const Color(0xffF8FAF9),
            flexibleSpace: FlexibleSpaceBar(
              collapseMode: CollapseMode.pin,
              background: Column(
                children: [
                  Stack(
                    clipBehavior: Clip.none,
                    alignment: Alignment.center,
                    children: [
                      SizedBox(
                        width: double.infinity,
                        child: Image.asset(
                          'assets/images/img_me_bg.png',
                          width: double.infinity,
                          height: 250.w,
                          fit: BoxFit.fill,
                        ),
                      ),

                      Positioned(
                        bottom: -35.w,
                        child: Container(
                          width: MediaQuery.of(context).size.width - 32.w,
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(16.r)
                          ),
                          child: Column(
                            children: [
                              SizedBox(
                                height: 35.w,
                              ),

                              SizedBox(
                                child: Text(myPurseController.userAccountBalance, style: TextStyle(fontSize: 32.sp, color: const Color(0xff333333), fontWeight: FontWeight.w500),),
                              ),

                              SizedBox(height: 5.w,),

                              SizedBox(
                                child: Text('账户余额(￥)', style: TextStyle(fontSize: 12.sp, color: const Color(0xff333333)),),
                              ),

                              SizedBox(height: 32.w,),

                              Container(
                                padding: EdgeInsets.symmetric(horizontal: 34.w),
                                child: Row(
                                  children: [
                                    Expanded(
                                      child: GestureDetector(
                                        behavior: HitTestBehavior.translucent,
                                        onTap: () {
                                          Get.toNamed(AppRoutes.withdraw);
                                        },
                                        child: Container(
                                          decoration: BoxDecoration(
                                            color: const Color(0xff499360).withOpacity(0.2),
                                            borderRadius: BorderRadius.circular(6.r)
                                          ),
                                          alignment: Alignment.center,
                                          padding: EdgeInsets.symmetric(vertical: 10.w),
                                          child: Text('提现', style: TextStyle(fontSize: 16.sp, color: const Color(0xff499360), fontWeight: FontWeight.w500),),
                                        ),
                                      ),
                                    ),

                                    SizedBox(width: 47.w,),

                                    Expanded(
                                      child: GestureDetector(
                                        behavior: HitTestBehavior.translucent,
                                        onTap: () {
                                          Get.toNamed(AppRoutes.recharge);
                                        },
                                        child: Container(
                                          decoration: BoxDecoration(
                                            color: const Color(0xff499360),
                                            borderRadius: BorderRadius.circular(6.r)
                                          ),
                                          padding: EdgeInsets.symmetric(vertical: 10.w),
                                          alignment: Alignment.center,
                                          child: Text('充值', style: TextStyle(fontSize: 16.sp, color: Colors.white, fontWeight: FontWeight.w500),),
                                        ),
                                      ),
                                    )
                                  ],
                                ),
                              ),

                              SizedBox(height: 20.w,)
                            ],
                          ),
                        )
                      )
                    ],
                  ),

                ],
              ),
            ),
          )
        ];
      },
      pinnedHeaderSliverHeightBuilder: () {
        return pinnedHeaderHeight;
      },
      body: Container(
        color: Colors.white,
        child: Column(
          children: [
            _tabbarTabWidget(myPurseController),

            Expanded(
              child: TabBarView(
                controller: myPurseController.tabController,
                children: [
                  ExpensesRecordWidget(),
                  RechargeRecordWidget(),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  _tabbarTabWidget(MyPurseController myPurseController) {
    return Stack(
      children: [
        SizedBox(
          width: double.infinity,
          child: TabBar(
            labelColor: const Color(0xff333333),
            controller: myPurseController.tabController,
            isScrollable: false,
            indicatorSize: TabBarIndicatorSize.label,
            indicator: GradientTabIndicator(),
            labelPadding: EdgeInsets.symmetric(horizontal: 15.w),
            indicatorPadding: EdgeInsets.symmetric(vertical: 4.w),
            labelStyle: TextStyle(color: const Color(0xff333333), fontSize: 16.sp),
            unselectedLabelStyle: TextStyle(color: const Color(0xff999999), fontSize: 16.sp),
            tabs: const [
              Tab(text: '消费记录'),
              Tab(text: '充值记录')
            ],
          ),
        ),
      ],
    );
  }

}
